<script>
function do_setPonto(){
	cpf = document.getElementById("cpf");
	if(cpf.value.length < 11 || cpf.value.length > 11){
		alert("Digite o CPF completo!");
		cpf.focus();
	} else {
		if(!isNaN(cpf.value)){
			x_setPonto(cpf.value, do_setPonto_cb);
		} else {
			alert("Digite um CPF válido!");
			cpf.value = '';
			cpf.focus();			
		}
	}
}
function do_setPonto_cb(resposta){
	if(resposta == 1){
		t = "Ponto registrado.";
	} else {
		t = "CPF não cadastrado.";		
	}
	document.getElementById("rotulo_cpf").innerHTML = t;
}
function do_getFunc(){
	o = document.getElementById("cpf");
	if(o.value.length>11){
		o.value = o.value.substr(0,11);
	} else {
		if(o.value.length>=1){
			x_getFunc(o.value, do_getFunc_cb);
			//x_getCPF(o.value, do_getCPF_cb);
			x_getTime(o.value, do_getTime_cb);			
		} else {
			document.getElementById("rotulo_nome").innerHTML = '';
			document.getElementById("rotulo_cpf").innerHTML = '';
		}
	}
}
function do_getFunc_cb(nome){
	document.getElementById("rotulo_nome").innerHTML = nome;
}
function do_getCPF_cb(cpf){
	document.getElementById("rotulo_cpf").innerHTML = cpf;
}
function do_getTime_cb(time){
	document.getElementById("rotulo_horario").innerHTML = time;
}

function setInput(o,k){
	t = 'Digite o seu CPF...';
	if(o.value=='' | o.value == t){
		if(k){
			o.value='';
			o.style.color='#000';
		} else {
			o.value=t;
			o.style.color='#ccc';
		}
	}
}

</script>

<div id="geral">
	<div id="header">
    	<h1>Coleta de Ponto</h1>
      <input name="" type="image" id="entrar" onClick="do_setPonto();" src="imagens/button.png" />	
        <input name="cpf" type="text" id="cpf" onkeyup="do_getFunc();" onfocus="setInput(this,1);" onblur="setInput(this,0);" value="Digite o seu CPF..." />
    </div>
    <div id="dados">
      <p id="rotulo_nome"></p>
  <div id="detalhes">
	    	<p id="rotulo_cpf"></p>        
    	    <p id="rotulo_horario"></p>
        </div>
    </div>
</div>
